<template>
    <div class="login-main">
        <svg-icon iconName="publish"></svg-icon>
        <div class="van-title">
            <van-divider>
                欢迎使用闲物App
            </van-divider>
        </div>

        <van-form class="login-form">
            <van-cell-group>
                <van-field
                    label="账号"
                    placeholder="请输入账号"
                    v-model="loginForm.account"/>

                <van-field
                    label="密码"
                    placeholder="请输入密码"
                    type="password"
                    v-model="loginForm.password"></van-field>

                <van-button @click="onClickLogin" type="primary" class="login-btn" hairline size="small">登录</van-button>
            </van-cell-group>
            <router-link :to="{name: 'register'}" class="link-area">
                <a>还没有账号？前往注册</a>
            </router-link>
        </van-form>
    </div>


</template>

<script>
import Vue from 'vue'
import {Form, CellGroup, Field, Button, Divider, Icon} from 'vant';
import {mapActions, mapGetters, mapState} from "vuex";
import router from "../router";

Vue.use(Icon);

export default {
    components: {
        [Form.name]: Form,
        [Button.name]: Button,
        [Field.name]: Field,
        [CellGroup.name]: CellGroup,
        [Divider.name]: Divider,
    },
    data() {
        return {
            loginForm: {
                account: "",
                password: "",
            },
            userToken: "",
        }
    },
    created() {
        console.log("welcome",this.$route.path)
    },
    mounted() {
        this.loginForm.account = this.user.account
    },
    computed: {
        ...mapGetters("user", ["isSeller"]),
        ...mapState("user", ["user"])
    },
    methods: {
        ...mapActions("user", ["login"]),

        async onClickLogin() {
            let user = this.loginForm
            let result = await this.login(user);
            if (result.state) {
                this.$toast("登录成功！");
                let goRouter = "home"
                if (this.isSeller) {
                    goRouter = "sellerHome";
                }
                this.$router.replace({name: goRouter});
            }
        },
    },

}
</script>

<style scoped>
.link-area {
    display: block;
    margin-top: 30px;
    text-align: center;
}

.login-main {
    text-align: center;
}

.van-title {
    text-align: center;
    color: #e6a23c;
    borderColor: #1989fa;
    margin: 20px 50px;
    padding: 0 16px
}

</style>
